<template>
  <Common title="归还">
    <template v-slot:content>
      <div class="content">
        <div class="container">
          <SelectDj
            v-show="active == 0"
            @goStep="goStep"
            ref="selectDj"
          ></SelectDj>
          <Back v-show="active == 1" @goStep="goStep" ref="back"></Back>
          <Result
            @close="close"
            v-show="active == 2"
            @goStep="goStep"
            ref="Rresult"
          ></Result>
        </div>
        <div class="step">
          <el-steps :active="active" align-center finish-status="success">
            <el-step
              v-for="(item, index) in data"
              :key="index"
              :title="item"
              @click.native="jump(index)"
              class="stepSuc"
            ></el-step>
          </el-steps>
        </div>
      </div>
    </template>
  </Common>
</template>

<script>
import Common from "@/components/common.vue";

import SelectDj from "./components/selectDj.vue";

import Back from "./components/back.vue";

import Result from "./components/result.vue";
import { getShopReturnData } from "@/common/api";

export default {
  name: "Return",
  props: {},
  components: {
    Common,
    SelectDj,
    Back,
    Result,
  },
  data() {
    return {
      active: 0,
      data: ["选择单据", "上架归还", "完成归还"],
      timer: null,
    };
  },
  computed: {},
  watch: {
    active(newV, oldV) {
      if (newV != 1) {
        this.$refs.back.closeT();
      }
      if (newV == 1) {
        if (oldV == 2) return; //出库失败，返回第二步
        if (this.$refs.selectDj.currentRow) {
          this.$refs.back.getData(this.$refs.selectDj.currentRow.orderCode);
        } else {
          this.$refs.back.getData();
        }
      }

      if (newV == 2) {
        let obj = {
          ...this.$refs.selectDj.currentRow,
          status: 1, //归还
          detailList: this.$refs.back.tableData,
          borrowRecordList: this.$refs.selectDj.multipleSelection.map(
            (i) => i.orderCode
          ),
        };
        this.$refs.Rresult.submit(obj);
      }
    },
  },
  created() {},
  mounted() {
    this.timer = setInterval(() => {
      this.start(); //开始轮询是否一端已提交
    }, 2000);
  },
  methods: {
    goStep(e) {
      this.active = e;
    },
    jump(e) {
      this.active = e;
    },
    start() {
      getShopReturnData().then((res) => {
        if (res.success && res.data) {
          this.close();
          if (this.active == 2) return;
          let room = localStorage.getItem("room");
          window.location.replace(`/#/main?room=${room}`);
        }
      });
    },
    close() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
  },
  destroyed() {
    this.close();
  },
};
</script>


<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  .container {
    width: 100%;
    height: 80%;
  }
  .step {
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
}
.stepSuc :hover {
  cursor: pointer;
}
</style>
